<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
            <title>Cindy JS</title>
            <script type="text/javascript" src="../build/js/Cindy.js"></script>
            <link rel="stylesheet" href="../css/cindy.css">


            </head>

	<body style="font-family:Arial;">

        <h1>CindyJS: First Physics</h1>


               <script id='init' type='text/x-cindyscript'>
        l=[];

        </script>

<script id='csmove' type='text/x-cindyscript'>



pairs=pairs(allmasses());
rad=1;rad1=1;
forall(pairs,s,
       if(|s_1,s_2|<(rad+rad1)*.9 & ((s_1).color!=(s_2).color),

          al=(|s_1,s_2|-(rad+rad1)*.3)/((rad+rad1)*.6);
          if(al<0,al=0);
          if(al>1,al=1);
          al=1-al;
          draw(s_1,s_2,size->2,alpha->al*2,color->(0,0,0));
          )
       );


        </script>


        <div  id="CSCanvas" style="width:500px; height:500px; border:2px solid #000000"></div>


        <script type="text/javascript">
            nn=80;
            var gslp=[
                      {name:"B", type:"Free", pos:[-9,9],color:[0,0,0],size:3},
                      {name:"C", type:"Free", pos:[-9,-9],color:[0,0,0],size:3},
                      {name:"D", type:"Free", pos:[9,-9],color:[0,0,0],size:3},
                      {name:"E", type:"Free", pos:[9,9],color:[0,0,0],size:3},

                    //  {name:"F", type:"Free", pos:[7,2.5],color:[1,.5,.5]},
                    //  {name:"X", type:"Free", pos:[-9,-7],color:[0,0,0]},
                    //  {name:"Y", type:"Free", pos:[9,-7],color:[0,0,0]},

                      {name:"a", type:"Segment", args:["B","C"],color:[0,0,0],size:1 },
                      {name:"b", type:"Segment", args:["C","D"],color:[0,0,0],size:1 },
                      {name:"c", type:"Segment", args:["D","E"],color:[0,0,0],size:1 },
                      {name:"d", type:"Segment", args:["E","B"],color:[0,0,0],size:1 }



                    ];

    for(var i=0;i<nn;i++){
    gslp.push(
              {name:"A"+i, type:"Free",
              pos:[(Math.random()-.5)*14,(Math.random()-.5)*14],
              color:i>nn/2?[1,.5,.5]:[.5,.5,1]}
              )

};
            var physics=[
                       {behavior:{type:"Environment",gravity:0,
                       accuracy:10,deltat:0.1,
                       balls:true,charges:true,friction:.1}},

                       {name:"a", behavior:{type:"Bouncer"}},
                       {name:"b", behavior:{type:"Bouncer"}},
                       {name:"c", behavior:{type:"Bouncer"}},
                       {name:"d", behavior:{type:"Bouncer"}}


                       ];


                           for(var i=0;i<nn;i++){
    physics.push(
              {name:"A"+i, behavior:{
              type:"Mass",
              vx:Math.random()-.5,
              vy:Math.random()-.5,
              charge:i>nn/2?-1:+1},
              }
              )

};
            var cdy = CindyJS({canvasname:"CSCanvas",
                        defaultAppearance: {dimDependent: 0.7},
                        movescript:"csmove",
                        initscript:"init",
                        geometry:gslp,
                        behavior:physics}
                        );

        </script>

        <button onclick="cdy.play()" type="button" style="position:absolute; top:610px;left:60px" >Play</button>
        <button onclick="cdy.pause()" type="button" style="position:absolute; top:610px;left:110px" >Pause</button>
        <button onclick="cdy.stop()" type="button" style="position:absolute; top:610px;left:170px" >Stop</button>

	</body>
</html>
